<template>
  <div class="starrocks-error-log-list">
    <div class="page-header">
      <div class="page-title">
        <div class="title-with-back">
          <el-button type="primary" :icon="ArrowLeft" @click="goBack" class="blue-return-button" circle />
          <div class="title-content">
            <div class="title-main">
              <el-icon class="title-icon"><WarningFilled /></el-icon>
              <h2>StarRocks 错误日志列表</h2>
            </div>
            <p class="page-description">
              <el-icon><Document /></el-icon>
              <span>查询 StarRocks 运行日志，支持集群、组件筛选</span>
            </p>
          </div>
        </div>
      </div>

      <div class="page-stats">
        <div class="stat-card total">
          <div class="stat-icon"><el-icon><Menu /></el-icon></div>
          <div class="stat-content">
            <div class="stat-number">{{ total }}</div>
            <div class="stat-label">查询结果</div>
          </div>
        </div>
        <div class="stat-card fatal">
          <div class="stat-icon"><el-icon><CircleClose /></el-icon></div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.fatal_count }}</div>
            <div class="stat-label">致命</div>
          </div>
        </div>
        <div class="stat-card error">
          <div class="stat-icon"><el-icon><WarnTriangleFilled /></el-icon></div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.error_count }}</div>
            <div class="stat-label">错误</div>
          </div>
        </div>
        <div class="stat-card warn">
          <div class="stat-icon"><el-icon><Warning /></el-icon></div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.warn_count }}</div>
            <div class="stat-label">警告</div>
          </div>
        </div>
      </div>
    </div>

    <div class="search-section">
      <el-card shadow="hover" class="search-card">
        <template #header>
          <div class="search-header">
            <div class="search-title">
              <el-icon><Search /></el-icon>
              <span>搜索与筛选</span>
            </div>
          </div>
        </template>

        <el-form :model="filterForm" class="search-form">
          <div class="search-form-content">
            <div class="search-form-fields">
              <el-form-item label="集群">
                <el-select v-model="filterForm.cluster" placeholder="全部集群" clearable style="width: 120px">
                  <el-option
                    v-for="cluster in clusterOptions"
                    :key="cluster"
                    :label="cluster.toUpperCase()"
                    :value="cluster"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="日志级别">
                <el-select v-model="filterForm.detailsLevel" placeholder="选择级别" clearable style="width: 120px">
                  <el-option label="全部" value="" />
                  <el-option label="ERROR" value="ERROR" />
                  <el-option label="WARN" value="WARN" />
                  <el-option label="FATAL" value="FATAL" />
                </el-select>
              </el-form-item>
              <el-form-item label="组件">
                <el-select v-model="filterForm.component" placeholder="全部组件" clearable style="width: 120px">
                  <el-option label="全部" value="" />
                  <el-option label="FE" value="fe" />
                  <el-option label="BE" value="be" />
                </el-select>
              </el-form-item>
              <el-form-item label="节点 IP">
                <el-select 
                  v-model="filterForm.nodeIp" 
                  placeholder="全部节点" 
                  clearable 
                  filterable
                  style="width: 200px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="10.1.1.65 (ETL FE主+BE)" value="10.1.1.65" />
                  <el-option label="10.1.1.102 (ETL FE从)" value="10.1.1.102" />
                  <el-option label="10.1.1.101 (ETL FE从)" value="10.1.1.101" />
                  <el-option label="10.1.1.64 (ETL BE)" value="10.1.1.64" />
                  <el-option label="10.1.1.61 (ETL BE)" value="10.1.1.61" />
                  <el-option label="10.1.1.62 (ETL BE)" value="10.1.1.62" />
                  <el-option label="10.1.1.63 (ETL BE)" value="10.1.1.63" />
                  <el-option label="10.1.1.72 (API FE主+BE)" value="10.1.1.72" />
                  <el-option label="10.1.1.69 (API BE)" value="10.1.1.69" />
                  <el-option label="10.1.1.71 (API BE)" value="10.1.1.71" />
                </el-select>
              </el-form-item>
              <el-form-item label="消息内容">
                <el-input v-model="filterForm.message" placeholder="支持模糊查询" clearable style="width: 200px" />
              </el-form-item>
            </div>

            <div class="search-form-actions">
              <el-button @click="filterExpanded = !filterExpanded">
                <el-icon><component :is="filterExpanded ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                {{ filterExpanded ? '收起筛选' : '高级筛选' }}
              </el-button>
              <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
              <el-button type="warning" @click="handleReset" :icon="Refresh">重置</el-button>
            </div>
          </div>

          <transition name="filter-expand">
            <div v-show="filterExpanded" class="search-form-expanded">
              <div class="search-form-fields">
                <el-form-item label="时间范围">
                  <el-date-picker
                    v-model="filterForm.timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :shortcuts="dateShortcuts"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 400px"
                    :teleported="true"
                    popper-class="datetime-picker-popper"
                    :clearable="true"
                  />
                </el-form-item>
              </div>
            </div>
          </transition>
        </el-form>
      </el-card>
    </div>

    <div class="table-section">
      <el-card shadow="hover" class="table-card">
        <template #header>
          <div class="table-header">
            <div class="table-title">
              <el-icon><List /></el-icon>
              <span>日志列表</span>
            </div>
            <div class="table-header-actions">
              <el-button type="success" @click="handleRefresh" :icon="Refresh" :loading="loading" size="small">刷新</el-button>
              <div class="table-info">
                <div class="pagination-control-wrapper" @click="paginationExpanded = !paginationExpanded">
                  <span class="page-count">本页 {{ logList.length }} 条</span>
                  <div class="divider"></div>
                  <span class="pagination-info">{{ pagination.page }}/{{ Math.ceil(total / pagination.pageSize) || 1 }}</span>
                  <el-icon class="pagination-icon" :class="{ 'expanded': paginationExpanded }"><ArrowDown /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </template>

        <el-table
          v-loading="loading"
          :data="logList"
          :default-sort="{ prop: 'log_timestamp', order: 'descending' }"
          @sort-change="handleSortChange"
          style="width: 100%;"
          :height="600"
          class="enhanced-table"
        >
          <el-table-column prop="log_timestamp" label="时间" width="200" fixed="left" sortable="custom" :sort-orders="['descending', 'ascending', null]">
            <template #default="{ row }">
              <div class="copyable-cell time-cell">
                <span class="time-display">{{ row.log_timestamp }}</span>
                <el-icon class="copy-icon" @click.stop="copyText(row.log_timestamp, '时间')"><DocumentCopy /></el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="details_level" label="级别" width="80" align="center">
            <template #default="{ row }">
              <el-tag :type="getLevelType(row.details_level)" size="small">{{ row.details_level }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="cluster" label="集群" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getClusterType(row.cluster)" size="small">
                {{ row.cluster?.toUpperCase?.() || 'UNKNOWN' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="component" label="组件" width="80" align="center">
            <template #default="{ row }">
              <el-tag :type="getComponentType(row.component)" size="small">
                {{ row.component?.toUpperCase?.() || '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="host_name" label="主机名" width="140" show-overflow-tooltip>
            <template #default="{ row }">
              <div class="copyable-cell">
                <span class="ellipsis" :title="row.host_name">{{ row.host_name || '-' }}</span>
                <el-icon class="copy-icon" @click.stop="copyText(row.host_name, '主机名')"><DocumentCopy /></el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="node_ip" label="节点IP" width="140" show-overflow-tooltip>
            <template #default="{ row }">
              <div class="copyable-cell">
                <span class="ellipsis" :title="row.node_ip">{{ row.node_ip }}</span>
                <el-icon class="copy-icon" @click.stop="copyText(row.node_ip, '节点IP')"><DocumentCopy /></el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="details_message" label="消息" min-width="300" show-overflow-tooltip>
            <template #default="{ row }">
              <div class="copyable-cell">
                <span class="ellipsis" :title="row.details_message">{{ row.details_message }}</span>
                <el-icon class="copy-icon" @click.stop="copyText(row.details_message, '消息')"><DocumentCopy /></el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="log_file_name" label="日志文件" width="180" show-overflow-tooltip />
          <el-table-column label="操作" width="80" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-tooltip content="查看详情" placement="top">
                  <el-button 
                    type="primary"
                    size="small" 
                    @click="viewDetail(row)" 
                    circle
                  >
                    <el-icon><View /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div v-show="paginationExpanded" class="pagination">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[20, 50, 100, 200]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            class="enhanced-pagination"
          />
        </div>
      </el-card>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" width="900px" :close-on-click-modal="false" top="5vh" class="unified-dialog">
      <template #header>
        <div class="dialog-header">
          <div class="header-icon header-icon-primary"><el-icon><Document /></el-icon></div>
          <div class="header-content">
            <h3>日志详情</h3>
            <p>查看 StarRocks 错误日志的详细信息</p>
          </div>
        </div>
      </template>

      <div v-if="selectedLog" class="dialog-content">
        <el-descriptions :column="2" border size="default">
          <el-descriptions-item label="时间">{{ selectedLog.log_timestamp }}</el-descriptions-item>
          <el-descriptions-item label="级别">
            <el-tag size="small" :type="getLevelType(selectedLog.details_level)">{{ selectedLog.details_level }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="集群">
            <el-tag size="small" :type="getClusterType(selectedLog.cluster)">
              {{ selectedLog.cluster?.toUpperCase?.() || 'UNKNOWN' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="组件">
            <el-tag size="small" :type="getComponentType(selectedLog.component)">
              {{ selectedLog.component?.toUpperCase?.() || '-' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="主机名">
            <div class="detail-trace">
              <span>{{ selectedLog.host_name || '-' }}</span>
              <el-button 
                v-if="selectedLog.host_name"
                size="small" 
                text 
                type="primary"
                @click="copyText(selectedLog.host_name, '主机名')"
                :icon="DocumentCopy"
              >
                复制
              </el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="节点IP">
            <div class="detail-trace">
              <span>{{ selectedLog.node_ip || '-' }}</span>
              <el-button 
                v-if="selectedLog.node_ip"
                size="small" 
                text 
                type="primary"
                @click="copyText(selectedLog.node_ip, '节点IP')"
                :icon="DocumentCopy"
              >
                复制
              </el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="节点类型">{{ selectedLog.node_type || '-' }}</el-descriptions-item>
          <el-descriptions-item label="代码位置">
            <div class="detail-trace">
              <span>{{ selectedLog.details_location || '-' }}</span>
              <el-button 
                v-if="selectedLog.details_location"
                size="small" 
                text 
                type="primary"
                @click="copyText(selectedLog.details_location, '代码位置')"
                :icon="DocumentCopy"
              >
                复制
              </el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="日志ID" :span="2">
            <div class="detail-trace">
              <span>{{ selectedLog.log_id || '-' }}</span>
              <el-button 
                v-if="selectedLog.log_id"
                size="small" 
                text 
                type="primary"
                @click="copyText(selectedLog.log_id, '日志ID')"
                :icon="DocumentCopy"
              >
                复制
              </el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="日志文件" :span="2">
            <div class="detail-trace">
              <span>{{ selectedLog.log_file_path || '-' }}</span>
              <el-button 
                v-if="selectedLog.log_file_path"
                size="small" 
                text 
                type="primary"
                @click="copyText(selectedLog.log_file_path, '日志文件路径')"
                :icon="DocumentCopy"
              >
                复制
              </el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="错误消息" :span="2">
            <div class="detail-message-container">
              <el-button 
                v-if="selectedLog.details_message"
                size="small" 
                text 
                type="primary"
                @click="copyText(selectedLog.details_message, '错误消息')"
                :icon="DocumentCopy"
                style="float: right;"
              >
                复制
              </el-button>
              <div class="detail-message">{{ selectedLog.details_message || '-' }}</div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="原始日志" :span="2" v-if="selectedLog.message">
            <div class="detail-message-container">
              <el-button 
                size="small" 
                text 
                type="primary"
                @click="copyText(selectedLog.message, '原始日志')"
                :icon="DocumentCopy"
                style="float: right;"
              >
                复制
              </el-button>
              <div class="detail-message">{{ selectedLog.message }}</div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft,
  Refresh,
  Search,
  Document,
  WarningFilled,
  WarnTriangleFilled,
  View,
  Menu,
  CircleClose,
  Warning,
  List,
  DocumentCopy,
  ArrowDown,
  ArrowUp
} from '@element-plus/icons-vue'
import api from '@/utils/api'
import { copyToClipboard as copyTextUtil } from '@/utils/clipboard'

const router = useRouter()
const loading = ref(false)
const logList = ref([])
const total = ref(0)
const stats = reactive({ error_count: 0, warn_count: 0, fatal_count: 0 })

const detailDialogVisible = ref(false)
const selectedLog = ref(null)
const filterExpanded = ref(false)
const paginationExpanded = ref(false)

const clusterOptions = ref([])

const pagination = reactive({ page: 1, pageSize: 50 })
const sortField = ref('details_timestamp')
const sortOrder = ref('desc')

const filterForm = reactive({
  timeRange: [],
  cluster: '',
  detailsLevel: '',
  component: '',
  nodeIp: '',
  message: ''
})

const dateShortcuts = [
  {
    text: '最近1小时',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(start.getHours() - 1)
      return [start, end]
    }
  },
  {
    text: '最近6小时',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(start.getHours() - 6)
      return [start, end]
    }
  },
  {
    text: '今天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(0, 0, 0, 0)
      return [start, end]
    }
  },
  {
    text: '最近7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  }
]

const goBack = () => router.back()

const fetchClusters = async () => {
  try {
    const response = await api.get('/logs/starrocks-error/clusters')
    if (response.data.success) {
      clusterOptions.value = response.data.data.clusters || []
    }
  } catch (error) {
    ElMessage.warning('获取集群列表失败：' + (error.message || '未知错误'))
  }
}

const fetchLogs = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.page,
      page_size: pagination.pageSize,
      sort: sortField.value,
      order: sortOrder.value
    }

    if (filterForm.timeRange && filterForm.timeRange.length === 2) {
      params.start_time = filterForm.timeRange[0]
      params.end_time = filterForm.timeRange[1]
    }
    if (filterForm.cluster) params.cluster = filterForm.cluster
    if (filterForm.detailsLevel) params.details_level = filterForm.detailsLevel
    if (filterForm.component) params.component = filterForm.component
    if (filterForm.nodeIp) params.node_ip = filterForm.nodeIp
    if (filterForm.message) params.message = filterForm.message

    const response = await api.get('/logs/starrocks-error/logs', { params })
    if (response.data.success) {
      logList.value = response.data.data.logs || []
      total.value = response.data.data.total || 0
      Object.assign(stats, response.data.data.stats || stats)
    }
  } catch (error) {
    ElMessage.error('获取日志列表失败：' + (error.response?.data?.message || error.message))
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.page = 1
  fetchLogs()
}

const handleReset = () => {
  const now = new Date()
  const start = new Date()
  start.setHours(0, 0, 0, 0)
  filterForm.timeRange = [formatDateTime(start), formatDateTime(now)]
  filterForm.cluster = ''
  filterForm.detailsLevel = ''
  filterForm.component = ''
  filterForm.nodeIp = ''
  filterForm.message = ''
  pagination.page = 1
  fetchLogs()
}

const handleRefresh = () => {
  if (filterForm.timeRange && filterForm.timeRange.length === 2) {
    const now = new Date()
    filterForm.timeRange[1] = formatDateTime(now)
  }
  fetchLogs()
}

const handlePageChange = (page) => {
  pagination.page = page
  fetchLogs()
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.page = 1
  fetchLogs()
}

const handleSortChange = ({ prop, order }) => {
  if (!prop || !order) {
    sortField.value = 'details_timestamp'
    sortOrder.value = 'desc'
  } else {
    sortField.value = prop
    sortOrder.value = order === 'ascending' ? 'asc' : 'desc'
  }
  fetchLogs()
}

const viewDetail = (row) => {
  selectedLog.value = row
  detailDialogVisible.value = true
}

const getLevelType = (level) => {
  const map = { ERROR: 'danger', WARN: 'warning', FATAL: 'danger' }
  return map[level] || 'info'
}

const getClusterType = (cluster) => {
  const map = {
    'etl': 'primary',      // 蓝色 - ETL 集群
    'api': 'success',      // 绿色 - API 集群
    'unknown': 'info'      // 灰色 - 未知
  }
  return map[cluster?.toLowerCase()] || 'info'
}

const getComponentType = (component) => {
  const map = {
    'fe': 'warning',       // 橙色 - Frontend
    'be': 'success',       // 绿色 - Backend
    'unknown': 'info'      // 灰色 - 未知
  }
  return map[component?.toLowerCase()] || 'info'
}

const copyText = async (text, field) => {
  if (!text) return
  await copyTextUtil(text, field)
}

const formatDateTime = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

onMounted(() => {
  handleReset()
  fetchClusters()
})
</script>

<style scoped>
.starrocks-error-log-list {
  padding: 0;
  min-height: calc(100vh - 60px);
}

.page-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.title-with-back {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.title-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.title-main h2 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.page-description {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 13px;
  margin: 0;
}

.page-stats {
  display: flex;
  gap: 18px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card.total .stat-icon { background: rgba(144, 147, 153, 0.1); color: #909399; }
.stat-card.fatal .stat-icon { background: rgba(255, 82, 82, 0.1); color: #ff5252; }
.stat-card.error .stat-icon { background: rgba(245, 108, 108, 0.1); color: #f56c6c; }
.stat-card.warn .stat-icon { background: rgba(230, 162, 60, 0.1); color: #e6a23c; }

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #303133;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.search-section {
  margin-bottom: 24px;
}

.search-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-form-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.search-form-fields {
  display: flex;
  gap: 16px;
  flex: 1;
}

.search-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-form-expanded {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.filter-expand-enter-active,
.filter-expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.filter-expand-enter-from,
.filter-expand-leave-to {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
}

.table-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pagination-control-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(64, 158, 255, 0.08);
  border: 1px solid rgba(64, 158, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
  height: 24px;
}

.pagination-control-wrapper:hover {
  background: rgba(64, 158, 255, 0.12);
}

.page-count {
  font-size: 12px;
  font-weight: 500;
  color: #909399;
}

.divider {
  width: 1px;
  height: 12px;
  background: rgba(64, 158, 255, 0.3);
}

.pagination-info {
  font-size: 12px;
  font-weight: 500;
  color: #409eff;
}

.pagination-icon {
  font-size: 14px;
  color: #409eff;
  transition: transform 0.3s;
}

.pagination-icon.expanded {
  transform: rotate(180deg);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.copyable-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.copyable-cell span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copyable-cell span.ellipsis {
  display: block;
}

.copyable-cell.time-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.copyable-cell.time-cell span.time-display {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
  font-size: 13px;
  font-weight: 500;
  color: #303133;
}

.copy-icon {
  font-size: 14px;
  color: #909399;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s;
  flex-shrink: 0;
}

.copyable-cell:hover .copy-icon {
  opacity: 1;
}

.copy-icon:hover {
  color: #409eff;
  transform: scale(1.15);
}

.copy-icon:active {
  transform: scale(0.95);
}

.detail-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-message {
  word-break: break-all;
  white-space: pre-wrap;
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.dialog-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f56c6c 0%, #f89c9c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.header-icon-primary {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
}

.header-content h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-content p {
  margin: 4px 0 0 0;
  color: #909399;
  font-size: 13px;
}

.dialog-content {
  padding: 0;
}

.detail-trace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-trace span {
  flex: 1;
  word-break: break-all;
}

.detail-message-container {
  position: relative;
}

.detail-message {
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: #303133;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.blue-return-button {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.blue-return-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  background: linear-gradient(135deg, #66b3ff 0%, #409eff 100%);
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 60px;
}

.action-buttons .el-button {
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .el-button:active {
  transform: translateY(0) scale(0.98);
}

.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409EFF 0%, #66B3FF 100%);
  border: none;
}
</style>


